<template>
    <div class="userinfo_container">
        <loading :flag="loading"></loading>

        <div class="userinfo_box" v-if="!loading">
            <section class="user">
                <img v-lazy="user.avatar_url" :title="user.loginname">
                <span class="loginname">{{ user.loginname }}</span>
                <p class="score">{{ user.score }} 积分</p>
                <p class="create_time">注册时间：{{ user.create_at | dateFormat }}</p>
            </section>

            <div class="replies">
                <p class="title">回复的主题</p>
                <ul>
                    <li v-for="item in user.recent_replies" :key="item.id">
                        <router-link :to="{ name: 'post_content',params: { id: item.id,name: item.author.loginname }}">
                            {{ item.title }}
                        </router-link>
                    </li>
                </ul>
            </div>

            <div class="topics">
                <p class="title">创建的主题</p>
                <ul>
                    <li v-for="item in user.recent_topics" :key="item.id">
                        <router-link :to="{ name: 'post_content',params: { id: item.id,name: item.author.loginname }}">
                            {{ item.title }}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import loading from './subcomponents/loading.vue'

export default {
    name: 'user_info',
    data(){
        return {
            loading: false,
            user: []
        }
    },
    mounted(){
        this.loading = true
        this.getData()
    },
    methods: {
        getData(){
            this.axios({
                url: `https://cnodejs.org/api/v1/user/${this.$route.params.name}`,
                method: 'get'
            })
            .then(res=>{
                if(res.data.success===true){
                    console.log(res)
                    this.user = res.data.data
                    this.loading = false
                }
            })
            .catch(err=>{
                console.log(err)
            })
        }
    },
    components: {
        loading
    }
}
</script>

<style lang="scss" scoped>
    .userinfo_box {
        width: 75%;
        margin: 10px auto;

        section,div {
            margin-bottom: 10px;
            background-color: #fff;
        }

        section.user {
            padding: 12px;

            img {
                width: 5rem;
            }
        }

        div.replies,
        div.topics {
            font-size: 0.72rem;

            p.title {
                padding: 12px 0 12px 12px;
	            background-color: rgba(212, 205, 205, 0.17);
  		        font-size: 0.75rem;	
            }

            li {
                list-style: none;
                padding: 4px 0 4px 12px;
                text-overflow: ellipsis;
                line-height: 30px;

                a {
                    text-decoration: none;
                    color: #094E99;
                }
            }
        }
    }
</style>
